/**
 * Created by wangzilong on 2017/4/11.
 */
import React, { Component } from 'react';
import {
    AppRegistry,
    StyleSheet,
    Text,
    View,
    ScrollView,
    TouchableOpacity,
    Platform,
    TextInput,
    ListView
} from 'react-native';
import ImageWrapper from '../components/ImageWrapper';
import NavigationBar from '../components/NavigationBar';
import { MapView, MapTypes, MapModule, Geolocation, PoiSearch } from '@zzzkk2009/react-native-baidu-map';
var Dimensions = require('Dimensions');
const { width, height } = Dimensions.get('window');
export default class Search extends Component{
    constructor(props) {
        super(props);
        var ds = new ListView.DataSource({rowHasChanged: (r1, r2) => r1 !== r2});
        this.addressList = [];
        this.state = {
            list:ds.cloneWithRows(this.addressList),
            inputText:'',
            city:this.props.navigation.state.params.city || '北京市',
        };   
    }
    renderListItem(rowdata,sectionID,rowID){
        return(
            <TouchableOpacity onPress={()=>this.selectAddress(rowdata)}>
                <View style={{justifyContent:'center',paddingLeft:20,paddingRight:20,borderBottomWidth:1,borderBottomColor:'#ccc'}}>
                    <Text style={{height:30,justifyContent:'center'}}>{rowdata.city+rowdata.address+rowdata.name}</Text>
                </View>
            </TouchableOpacity>
        )
    }
    render(){
        return (
            <View style={styles.container}>
                <NavigationBar 
                    leftIcon={'left'} 
                    titleText={'搜索'} 
                    leftPress={()=>this.goBack()}/>
                <View style={{backgroundColor:'#ccc',padding:10}}>
                    <TextInput
                        underlineColorAndroid={'transparent'}
                        style={{backgroundColor:'#fff',borderRadius:3,paddingLeft:10,paddingRight:10,paddingTop:0,paddingBottom:0}}
                        onChangeText={(text)=>this.getDateList(text)}
                        placeholder={'搜索'}/>
                </View> 
                <ListView
                    style={{flex:1}}
                    dataSource={this.state.list}
                    enableEmptySections={true}
                    renderRow={(rowdata,sectionID,rowID) => this.renderListItem(rowdata,sectionID,rowID)}/>      
            </View>
        )
    }
    goBack(){
        this.props.navigation.goBack();
    }
    selectAddress(data){
        this.props.navigation.state.params.getSearchData(data);
        this.goBack();
    }
    getDateList(text){
        var $this = this;
        this.setState({
            inputText:text
        })
        PoiSearch.searchInCityProcess($this.state.city,text, 1)
        .then(data => {
            alert(JSON.stringify(data.poiResult.poiInfos))
            if(data.message=='成功'){
                $this.addressList = $this.addressList.concat(data.poiResult.poiInfos);
                $this.setState({
                    list:$this.state.list.cloneWithRows($this.addressList)
                })
            }else{
                // alert(2)
                console.log('出错了！');
            }
            // alert(JSON.stringify(data))
        })
        .catch(e =>{
            console.warn(e, 'error')
            // alert(2)
        })
    }
}
const styles = StyleSheet.create({
    container:{
        flex:1,
        backgroundColor:'#fff',
        ...Platform.select({
            ios: {
                marginTop: 20
            },
            android: {
                marginTop:0
            },
        }),
    },  
});